<template>
	<view class="boxtop">
		<view class="abc">
			<view class="left">
				<view :class="active==item.title ? 'mainitem leftactive' :'mainitem'" @click="bigitem(item.title)"
					v-for="(item,index) in goodlist" :key="index">
					{{item.title}}
				</view>
			</view>
		<view class="right">
			<block v-for="(item,index) in goodlist" :key="index" v-if="active == item.title">
				<view class="righttitle">
					{{item.title}}
				</view>
				<view class="rightitem" v-for="(childeitem,i) in item.gooditem" :key="i">
					<image :src="childeitem.img" class="imgitem"></image>
					<view class="dp flex1 boxitem ml5">
						<view class="">
							<view>{{childeitem.name}}</view>
							<view class="cF07C66">￥{{childeitem.price}}/瓶</view>
						</view>
						<view class="aboutnum">
						<view class="changenum mr5" @click="changenum(childeitem.id,-1,childeitem)">-</view>
						{{childeitem.num}}
							<view class="changenum ml5" @click="changenum(childeitem.id,1,childeitem)">+</view>
						</view>
					</view>
				</view>
			</block>
		</view>
			</view>
		<view class=" bottom">
			<image src="../../static/icon_car.png" class="cartimg"></image>
			<view class="goodnum">{{totalnum}}</view>{{totalprice}}<view class="gobuy" @click="pay()">购买</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: '白酒',
				goodlist: [{
						title: '白酒',
						gooditem: [{
								id: 1,
								name: "贵州茅台",
								price: 1500,
								num: 0,
								img: '../../static/7.png'
							},
							{
								id: 2,
								name: "五粮液",
								price: 999,
								num: 0,
								img: '../../static/7.png'
							},
							{
								id: 3,
								name: "歪嘴",
								price: 28,
								num: 0,
								img: '../../static/7.png'
							},
							{
								id: 4,
								name: "江小白",
								price: 24,
								num: 0,
								img: '../../static/7.png'
							},
						]
					},
					{
						title: '啤酒',
						gooditem: [{
								id: 5,
								name: "雪花纯生",
								price: 1500,
								num: 0,
								img: '../../static/7.png'
							},
							{
								id: 6,
								name: "勇闯天涯",
								price: 999,
								num: 0,
								img: '../../static/7.png'
							},
							{
								id: 7,
								name: "夺命大乌苏",
								price: 28,
								num: 0,
								img: '../../static/7.png'
							},
							{
								id: 8,
								name: "黑丝",
								price: 24,
								num: 0,
								img: '../../static/7.png'
							},
						]
					},
				],
			sel:[]  //加入购物车商品数组
			}
		},
		methods: {
			//点击切换选项卡
			bigitem(title) {
				this.active = title;
			},
			changenum(id,num,item) {
				// console.log(id,item,num)
				//数组去重
				this.sel.forEach((item,i)=>{
					//判断,如果传递进来id和遍历的id相同,说明数据找到,删除
					if(item,id==id){this.sel.splice((i,1))}
				})
				//数量-
				item.num+=num
				//对应的数据,只有数量大于0,才能在数组中添加对象
				if(item.num>0){
					this.sel.push(item)
				}
				// console.log(this.sel)
			},
			// 点在结算 在线支付
			pay(){
				uni.request({
					url: "/api/v1/order/place", // 后端接口地址 生成订单id
					method: "POST",
					data: { arr: this.sel, openid: 用户id },
					success: (res) => {
						// res 会包括订单id
						// 2. 获取到订单id后，发给后台，得到前端需要的必要参数
						uni.request({
							url: "/pay/pre_order",  // 得到必要参数的接口
							method: "POST",
							data: { orderId: res.有一个订单id, openid: 用户id },
							success: (res) => {
								// res 就会包括前端所需要的必要参数都在res中  时间戳 随机串 签名 签名算法
								// requestPayment 在线支付的api方法 官方的
								uni.requestPayment({
								    provider: 'wxpay',  // 服务商
								    timeStamp: 1536378375,  // 时间戳
								    nonceStr: '“b8a7e04f54723c35e75d2b27109dc2be',  // 随机串
								    package: 'prepay_id=wx20180101abcdefg',  // 配置选项
								    signType: 'MD5',  // 签名算法
								    paySign: '6815C06D715FC4B9FD4E1FA2E9B233FD',   // 签名
								    success: function (res) {
								        console.log('success:' + JSON.stringify(res));
								    },
								    fail: function (err) {
								        console.log('fail:' + JSON.stringify(err));
								    }
								});
							}
						})
					}
				})
			},
		},
		computed:{
			//总数
			totalnum(){
				let num=0
				for(let obj of this.sel){
					num+=obj.num
				}
				return num
			},
			totalprice(){
				let price=0
				for(let obj of this.sel){
					price+=obj.num*obj.price
				}
				return price
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.boxtop {
		display: flex;
		height: 100%;
		flex-direction: column;
	}

	.abc {
		flex: 1;
		display: flex;
	}
	.boxitem{padding-top:5px;}

	.left {
		width: 100px;
		background: #F7F7F7;
	}

	.leftactive {
		background: #fff;
	}

	.right {
		flex: 1;
	}

	.mainitem {
		height: 40px;
		line-height: 40px;
		text-align: center;
		overflow: scroll;
	}

	.righttitle {
		height: 40px;
		line-height: 40px;
	}

	.imgitem {
		width: 80px;
		height: 80px;
	}

	.bottom {
		position: relative;
		border-top: 1px solid #ccc;
		width: 100%;
		display: flex;
		padding-left: 20px;
		justify-content: space-between;
		align-items: center;
		height: 50px;
		box-sizing: border-box;
	}

	.cartimg {
		width: 50px;
		height: 50px;
	}

	.goodnum {
		position: absolute;
		left: 60px;
		top: 0px;
		width: 18px;
		height: 18px;
		color: #fff;
		background-color: #F93638;
		border-radius: 50%;
		text-align: center;
		font-size: 12px;
	}

	.aboutnum {
	    position: absolute;
		display: flex;
	    right: 10px;
	    bottom: 0px;
		height: 25px;
	}

	.changenum {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: #F93638;
		color: #fff;
		text-align: center;
	}

	.rightitem {
		padding: 0 10px;
		display: flex;
		margin-bottom: 10px;
		position: relative;
	}

	.gobuy {
		width: 100px;
		background: #FD6453;
		height: 100%;
		width: 80px;
		text-align: center;
		line-height: 40px;
		color: #fff;
	}
</style>
